import React from 'react'
import { View, Text } from '@tarojs/components'
import { ConfigProvider, Avatar } from '@nutui/nutui-react-taro'
import './index.scss'
import { useRoleStore, ROLE_TYPES } from '../../store/useRoleStore';
import { useInfoStore } from '../../store/useInfoStore';

// 导入仪表盘组件
import StudentDashboard from '../../components/dashboard/StudentDashboard'
import LeaderDashboard from '../../components/dashboard/LeaderDashboard'
import { BASE_URL } from '../../services/request';

function Index() {
  // 使用简单的选择器而不是复杂对象解构，避免不必要的re-render
  const userRole = useRoleStore(state => state.userRole);
  const userInfo = useInfoStore(state => state.info);

  const userAvatar = userInfo?.picture ? BASE_URL + userInfo.picture : '';

  const getCurrentDate = () => {
    const date = new Date();
    const year = date.getFullYear();
    const month = date.getMonth() + 1;
    const day = date.getDate();
    return `${year}年${month}月${day}日`;
  }

  const getWeekDay = () => {
    const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
    const day = new Date().getDay();
    return weekDays[day];
  }


  return (
    <ConfigProvider>
      <View className='nutui-react-demo'>
        <View className="welcome-info">
          <View className="welcome-info-left">
            <Text className="welcome-name"> 你好，{userInfo?.name || 'XXX'}</Text>
            <Text className="welcome-date"> {`${getCurrentDate()} ${getWeekDay()}`}</Text>
          </View>
          <View className="avatar">
            <Avatar src={userAvatar} />
          </View>
        </View>

        {/* 根据角色渲染对应的仪表盘 */}
        {userRole === ROLE_TYPES.LEADER ? (
          <LeaderDashboard />
        ) : (
          <StudentDashboard />
        )}
      </View>
    </ConfigProvider>
  )
}

export default Index
